import React, { useEffect, useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import { pay } from "../../service/busService";
import { NavBar, Tag, Tabs, Button, Toast, Dialog, Radio } from "antd-mobile";
import { orderQuery } from "../../service/busService";
import "./bus.scss";
interface OrderListData {
  start: string;
  path: string;
  endTime: string;
  end: string;
  price: string;
  orderNum: string;
  status: boolean;
}
export default function BusMain() {
  const [params] = useSearchParams();
  let type = params.getAll("type")[0] || "1";

  let [orderList, setOrderList] = useState([] as OrderListData[]);
  const [page, setPage] = useState(1);
  const [pageSize] = useState(10000);
  const [total, setTotle] = useState(0);
  const [yzf, setYzf] = useState<any[]>([]);
  const [wzf, setWzf] = useState<any[]>([]);
  let navigate = useNavigate();
  const getList = () => {
    orderQuery({ pageNum: page, pageSize }).then((res: any) => {
      let val1 = [] as any[];
      let val2 = [] as any[];
      res.data.rows.forEach((item: any) => {
        if (item.status) {
          val1.push(item);
        } else {
          val2.push(item);
        }
      });
      setYzf(val1);
      setWzf(val2);
      setOrderList(res.data.rows);
      setTotle(res.data.total);
    });
  };
  useEffect(() => {
    getList();

    // (async () => {
    //   let { data } = await orderQuery()
    //   // console.log(data);
    //   setOrderList(data.rows)
    //   setTotle(data.total)
    // })()
  }, []);
  // console.log(orderList);
  const changePage = (page: number) => {
    setPage(page);
    orderQuery({ pageNum: page, pageSize }).then((res: any) => {
      setOrderList(res.data.rows);
      console.log(res.data.rows);
    });
  };
  return (
    <div
      style={{
        position: "fixed",
        top: "0px",
        bottom: "0px",
        left: "0px",
        right: "0px",
        backgroundColor: "#fff",
        overflow: "scroll",
        zIndex: "1",
      }}
    >
      <NavBar onBack={() => navigate(-1)}>我的订单</NavBar>
      <Tabs defaultActiveKey={type}>
        <Tabs.Tab title="待支付" key="1">
          <div className="mycontent">
            {wzf.map((item: any, index) => {
              return (
                <div className="box_item" key={index}>
                  <div className="header">
                    <img
                      src="https://img0.baidu.com/it/u=995930361,2720222055&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                      alt=""
                    />
                    <div className="route">{item.path}</div>
                  </div>
                  <div className="info">
                    <div className="li">订单号：{item.orderNum}</div>
                    <div className="li">起点站：{item.start}</div>
                    <div className="li">终点站：{item.end}</div>
                    <div className="li">
                      状态：<Tag color="danger">未支付</Tag>
                    </div>
                  </div>
                  <div className="arrow_region">
                    <Button
                      shape="rounded"
                      color="primary"
                      size="mini"
                      onClick={async () => {
                        Dialog.confirm({
                          title: "请选择支付方式",
                          content: (
                            <Radio.Group defaultValue="r1">
                              <Radio value="r1">支付宝</Radio>
                              <Radio value="r2">微信</Radio>
                            </Radio.Group>
                          ),
                          onConfirm() {
                            Dialog.confirm({
                              content: (
                                <div
                                  style={{
                                    display: "flex",
                                    alignContent: "center",
                                    justifyContent: "center",
                                  }}
                                >
                                  <img
                                    src="https://img.atobo.com/ProductImg/EWM/UWeb/1/4/6/4/750/1464750/1.gif"
                                    alt="二维码"
                                  />
                                </div>
                              ),
                              confirmText: "我已支付",
                              async onConfirm() {
                                let res = await pay({
                                  orderNum: item.orderNum,
                                  paymentType: "电子支付",
                                });
                                if (res.data.code === 200) {
                                  Toast.show({
                                    icon: "success",
                                    content: "购票成功!",
                                  });
                                  navigate("/");
                                }
                              },
                              onCancel() {},
                            });
                          },
                        });
                      }}
                    >
                      立即支付
                    </Button>
                  </div>
                </div>
              );
            })}
          </div>
        </Tabs.Tab>
        <Tabs.Tab title="已支付" key="2">
          <div className="mycontent">
            {yzf.map((item: any, index) => {
              return (
                <div
                  className="box_item"
                  key={index}
                  onClick={() => {
                    navigate("/");
                  }}
                >
                  <div className="header">
                    <img
                      src="https://img0.baidu.com/it/u=995930361,2720222055&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
                      alt=""
                    />
                    <div className="route">{item.path}</div>
                  </div>
                  <div className="info">
                    <div className="li">订单号：{item.orderNum}</div>
                    <div className="li">起点站：{item.start}</div>
                    <div className="li">终点站：{item.end}</div>
                    <div className="li">
                      状态：<Tag color="success">已支付</Tag>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </Tabs.Tab>
      </Tabs>

      {/* <Pagination
        value={page}
        onChange={changePage}
        totalItems={total}
        itemsPerPage={pageSize} /> */}
    </div>
  );
}
